<template>
    <div class="cmt-container">
        <h1>发表评论</h1>
        <hr>
        <textarea v-model="msg" placeholder="请输入要评论的内容（最多120字）" maxlength="120"></textarea>
        <mt-button type="primary" size="large" @click="submit">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comments" :key="item.add_time">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time|dataFormat}}
                </div>
                <div class="cmt-body">
                    <!-- 三级表达式 -->
                    {{item.content==='undefined'?'此用户很懒，啥都没说':item.content}}  
                </div>
            </div>
            

        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
//import {getcomments} from '../../api/api'
import {Toast} from 'mint-ui'
export default {
    data(){
        return{
            pageIndex:1,  //默认显示第一页的数据
            comments:[],
            msg:''
        }
    },
    created() {
        this.getComments()
    },
    methods: {
        getComments(){  //获取评论
            // let data = {}
            // getcomments(data).then(res => {
            // console.log(res);
            // let { status, msg, data } = res;
            // if(status == 0){
            //    //this.comments=res.message
            //    //每当获取新评论数据的时候，不要把老数据清空覆盖，而应把新数据拼接到老数据上
            //    this.comments=this.comments.concat(res.message)
            // }
            // else{
            //     Toast('获取评论失败！')
            // }
            // });
            this.$http.get('api/getcomments/'+this.cmsid+'?pageindex='+this.pageIndex).then(res=>{
                 //console.log(res.body)
                 if(res.body.status==0){
                    this.comments=this.comments.concat(res.body.message)
                    //Toast("获取评论成功")
                }else{
                     Toast('获取评论失败！')
                }
            })
        },
        getMore(){   //加载更多
            this.pageIndex++
            this.getComments()
        },
        submit(){
            if(this.msg.trim().length==0){
                    return Toast('评论内容不能为空！')
            }
            this.$http.post('http://www.liulongbin.top:3005/api/postcomment/'+this.cmsid,{content:this.msg.trim()},{emulateJSON:true})
            .then(function(res){
                if(res.body.status==0){
                var cms={
                    user_name:'匿名用户',
                    add_time:Date.now(),
                    content:this.msg.trim()
                };
                this.comments.unshift(cms)
                this.msg=''
                }else{
                    Toast('发表评论失败！')
                }
            })
        }
    },
    props:['cmsid']
}
</script>

<style lang="scss" scoped>

.cmt-container{
    h1{
        font-size: 18px;
    }
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list{
        margin: 5px 0;
        .cmt-title{
            background-color:#ccc;
            font-size: 12px;
        }
        .cmt-body{
            line-height: 40px;
            text-indent: 2em;
            font-size:14px; 
        }
    }
}
</style>

